<template>
  <div class="index-container">
    <el-card class="account-container">
      <h1>您好管理员，欢迎登录系统后台</h1>
      <h1>现在是北京时间：{{ bjTime }}</h1>
      <div style="line-height: 30px">
        <ul>
          <li>请通过左侧菜单进行功能导航（商品管理上架后才会显示在首页）</li>
          <li>新增商品请点击快捷操作-<RouterLink to="/add">添加商品</RouterLink></li>
          <li>
            网站轮播图配置请点击左侧菜单-<RouterLink to="/swiper">轮播图配置</RouterLink>
          </li>
          <li>
            新品上线版块配置请点击左侧菜单-<RouterLink to="/new">新品上线配置</RouterLink>
          </li>
          <li>
            热销商品版块配置请点击左侧菜单-<RouterLink to="/hot">热销商品配置</RouterLink>
          </li>
          <li>
            推荐商品版块配置请点击左侧菜单-<RouterLink to="/recommend"
              >推荐商品配置</RouterLink
            >
          </li>
          <li>
            修改商品请点击点击左侧菜单-<RouterLink to="/good">商品管理</RouterLink
            >-商品-修改
          </li>
        </ul>
      </div>
    </el-card>
    <!-- <el-card>
      <div class="hitokoto">
        <div class="hitokoto_text"></div>
        <div class="hitokoto_from"></div>
      </div>
    </el-card> -->
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
const bjTime = ref(new Date().toLocaleString());

setInterval(() => {
  bjTime.value = new Date().toLocaleString();
}, 1000);

onMounted(async () => {
  const response = await fetch("https://v1.hitokoto.cn");
  const { uuid, hitokoto: hitokotoText, from } = await response.json();
  const hitokoto = document.querySelector(".hitokoto_text");
  const hitokotoFrom = document.querySelector(".hitokoto_from");
  // hitokoto.href = `https://hitokoto.cn/?uuid=${uuid}`
  hitokoto.innerText = "「" + hitokotoText + "」";
  hitokotoFrom.innerText = "——" + from;
});
</script>
<style scoped>
li {
  line-height: 36px;
}
.index-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  /* align-items: center; */
  /* justify-content: center; */
  width: 100%;
}

.hitokoto {
}

.hitokoto_text {
  text-align: center;
  font-size: 16px;
  color: #363636;
}

.hitokoto_from {
  text-align: right;
}

.course {
  font-weight: bold;
  display: inline-block;
}

.course li {
  line-height: 36px;
  color: #409eff;
  cursor: pointer;
}
</style>
